<div id="box_card">
    {if $cards}
    {foreach from=$cards key=k item=v}
    <section class="edit-map wrapper edit-card {if ! $content_id || $card_id != $v._id}default-hidden{/if}"
             id="edit_card_{$k + 1}">
        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label"><font class="red">* </font>行动名称</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="title_card[]" value="{$v.title}" placeholder="请输入行动名称"/>
            </div>
        </div>
        <div class="line line-dashed line-sm pull-in"></div>

        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label"><font class="red">* </font>行动时间</label>
            <div class="col-sm-3">
                <input name="tte_start_card[]" class="form-control datetimepicker-input" type="text" autocomplete="off"
                       data-date-format="yyyy-mm-dd hh:ii:ss" value="{$v.tte_start}" placeholder="点击选择行动开始时间"
                       readonly="readonly"/>
            </div>
            <div class="col-sm-3">
                <input name="tte_end_card[]" class="form-control datetimepicker-input" type="text" autocomplete="off"
                       data-date-format="yyyy-mm-dd hh:ii:ss" value="{$v.tte_end}" placeholder="点击选择行动结束时间"
                       readonly="readonly"/>
            </div>
        </div>
        <div class="line line-dashed line-sm pull-in"></div>

        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label"><font class="red">* </font>行动目标</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="respondent_card[]" value="{$v.respondent}"
                       placeholder="请输入行动目标"/>
            </div>
        </div>
        <div class="line line-dashed line-sm pull-in"></div>

        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label"><font class="red">* </font>行动地区</label>
            <div class="col-sm-8">
                <select data-init="22" data-selected="{if $v.region_hid_arr.3}{$v.region_hid_arr.3}{else}23{/if}"
                        class="input-sm form-control inline col-def-2-8 region">
                    <option value="0">请选择</option>
                </select>
                <select data-init="{if $v.region_hid_arr.3}{$v.region_hid_arr.3}{else}23{/if}"
                        data-selected="{if $v.region_hid_arr.4}{$v.region_hid_arr.4}{else}39{/if}"
                        class="input-sm form-control inline col-def-2-8 region">
                    <option value="0">请选择</option>
                </select>
                <select data-init="{if $v.region_hid_arr.4}{$v.region_hid_arr.4}{else}39{/if}"
                        data-selected="{$v.region_hid_arr.5}" class="input-sm form-control inline col-def-2-8 region">
                    <option value="0">请选择</option>
                </select>
                {if false}
                <select name="region_id_card[]" data-init="{$v.region_hid_arr.5}"
                        data-selected="{$v.region_hid_arr.6}" class="input-sm form-control inline col-def-2-8 region">
                    <option value="0">请选择</option>
                </select>
                {/if}
            </div>
        </div>
        <div class="line line-dashed line-sm pull-in"></div>

        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label"><font class="red">* </font>详细地址</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="address_card[]" value="{$v.address}"
                       placeholder="请输入详细地址"/>
            </div>
        </div>

        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label">自定义标签</label>
            <div class="col-sm-6 label-select2">
                <input type="hidden" class="select2-tags archive-label" name="label_card[]" style="width:100%;"
                       value="{$v.label}" placeholder="  请输入或选择案件标签"/>
            </div>
        </div>
        <div class="line line-dashed line-sm pull-in"></div>

        <div class="form-group m-b-xs">
            <label class="col-sm-2 control-label">行动描述</label>
            <div class="col-sm-6">
                <textarea name="description_card[]" rows="2" class="form-control"
                          placeholder="请输入资料描述">{$v.description}</textarea>
            </div>
        </div>
        <div class="line line-dashed line-sm pull-in"></div>

        <section class="editor clipcloud-editor-upload-btn" id="edit_fileupload_{$k + 1}" data-card_id="{$v._id}">
            <div class="dropfile-diy sortable-placeholder wrapper" style="min-height:65px;">
                <a href="javascript:;" class="btn btn-success fileinput-button">
                    <i class="fa fa-cloud-upload"></i>
                    <span class="text">上传</span>
                    <span class="text-active">上传中...</span>
                    <input type="file" class="btn-fileupload" name="files" multiple/>
                </a>
                <!--@click="uploadPopShow"-->
                <div class="btn-submiting">
                    <div class="upload-icon-box">
                        <div class="uploading ">

                        </div>

                        <div class="skip icon-box-svg">

                        </div>

                        <div class="done icon-box-svg">

                        </div>
                        <div class="error icon-box-svg">

                        </div>
                    </div>
                </div>
                <a href="javascript:;" class="btn btn-danger btn-delete_multiple hide">
                    <i class="fa fa-trash-o"></i>
                    <span class="text">删除</span>
                </a>
                <i class="fa fa-spin fa-spinner spin-notice hide"></i>

                <span class="pull-right m-t-sm">
                    请点击“上传”按钮选择单个或多个文件进行上传
                </span>
            </div>

            <section
                    class="panel panel-default m-t gallery-edit gallery-image {if ! $v.attachments_img}default-hidden{/if}">
                <header class="panel-heading">
                    <span class="label bg-danger pull-right"><font class="count-attachment">{$v.attachments_img_info|count}</font> 张</span>
                    照片
                </header>
                <table class="table table-striped table-striped-image m-b-none text-sm">
                    <thead>
                    <th class="col-sm-1 hide" data-property="checkbox"><input type="checkbox"></th>
                    <th class="col-sm-2">预览</th>
                    <th>名称</th>
                    <th class="col-sm-2">大小</th>
                    <th class="col-sm-3">创建时间</th>
                    <th class="col-sm-2">操作</th>
                    </thead>
                    <tbody>
                    {foreach from=$v.attachments_img_info key=kk item=vv}
                    <tr id="tr_a_{$vv._id}" attachment_id="{$vv._id}" card_id="{$v._id}">
                        <td class="v-middle hide"><input type="checkbox" class="select-single" value="{$vv._id}"/></td>
                        <td class="v-middle">
                            <a href="/workbenchadmin/image?_id={$vv._id}&card_id={$v._id}" title="点击进入编辑"
                               target="_blank">
                                <img src="/uploads{$vv.filepath}" class="thumb-lg" border="0"/>
                            </a>
                        </td>
                        <td class="v-middle">{$vv.title}</td>
                        <td class="v-middle">{$vv.filesize_format}</td>
                        <td class="v-middle">{$vv.ctime}</td>
                        <td class="v-middle">
                            <span class="btn-box">
                                <a href="/workbenchadmin/image?_id={$vv._id}&card_id={$v._id}"
                                   class="btn btn-primary btn-xs edit-single" target="_blank">
                                    <i class="fa fa-pencil"></i><span> 编辑</span>
                                </a>
                                <button type="button" class="btn btn-danger btn-xs delete-single" data-delete-type="img"
                                        data-duration="0" data-card_id="{$v._id}">
                                    <i class="fa fa-trash-o"></i><span> 删除</span>
                                </button>
                            </span>
                            <span class="btn-state" style="display: none"></span>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </section>

            <section
                    class="panel panel-default m-t gallery-edit gallery-audio {if ! $v.attachments_audio}default-hidden{/if}">
                <header class="panel-heading">
                    <span class="label bg-danger pull-right"><font class="count-attachment">{$v.attachments_audio_info|count}</font> 个</span>
                    录音 [总时长：<font class="count-duration">{$v.duration_audio}</font> 秒]
                </header>
                <table class="table table-striped table-striped-audio m-b-none text-sm">
                    <thead>
                    <th class="col-sm-1 hide" data-property="checkbox"><input type="checkbox"></th>
                    <th class="col-sm-2">预览</th>
                    <th>名称</th>
                    <th class="col-sm-2">时长</th>
                    <th class="col-sm-2">大小</th>
                    <th class="col-sm-3">创建时间</th>
                    <th class="col-sm-2">操作</th>
                    </thead>
                    <tbody>
                    {foreach from=$v.attachments_audio_info key=kk item=vv}
                    <tr id="tr_a_{$vv._id}" attachment_id="{$vv._id}" card_id="{$v._id}">
                        <td class="v-middle hide"><input type="checkbox" class="select-single" value="{$vv._id}"/></td>
                        <td class="v-middle">
                            <a href="/workbenchadmin/audio?_id={$vv._id}&card_id={$v._id}" title="点击进入编辑"
                               target="_blank">
                                <i class="fa fa-music text-xxxl"></i>
                            </a>
                        </td>
                        <td class="v-middle">{$vv.title}</td>
                        <td class="v-middle">{$vv.extra.duration} 秒</td>
                        <td class="v-middle">{$vv.filesize_format}</td>
                        <td class="v-middle">{$vv.ctime}</td>
                        <td class="v-middle">
                            <span class="btn-box">
                                <a href="/workbenchadmin/audio?_id={$vv._id}&card_id={$v._id}"
                                   class="btn btn-primary btn-xs edit-single" target="_blank">
                                <i class="fa fa-pencil"></i><span> 编辑</span>
                            </a>
                            <button type="button" class="btn btn-danger btn-xs delete-single" data-delete-type="audio"
                                    data-duration="{$vv.extra.duration}" data-card_id="{$v._id}">
                                <i class="fa fa-trash-o"></i><span> 删除</span>
                            </button>
                            </span>
                            <span class="btn-state" style="display: none"></span>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </section>

            <section
                    class="panel panel-default m-t gallery-edit gallery-video {if ! $v.attachments_video}default-hidden{/if}">
                <header class="panel-heading">
                    <span class="label bg-danger pull-right"><font class="count-attachment">{$v.attachments_video_info|count}</font> 个</span>
                    录像 [总时长：<font class="count-duration">{$v.duration_video}</font> 秒]
                </header>
                <table class="table table-striped table-striped-video m-b-none text-sm">
                    <thead>
                    <th class="col-sm-1 hide" data-property="checkbox"><input type="checkbox"></th>
                    <th class="col-sm-2">预览</th>
                    <th>名称</th>
                    <th class="col-sm-2">时长</th>
                    <th class="col-sm-2">大小</th>
                    <th class="col-sm-3">创建时间</th>
                    <th class="col-sm-2">操作</th>
                    </thead>
                    <tbody>
                    {foreach from=$v.attachments_video_info key=kk item=vv}
                    <tr id="tr_a_{$vv._id}" attachment_id="{$vv._id}" card_id="{$v._id}">
                        <td class="v-middle hide"><input type="checkbox" class="select-single" value="{$vv._id}"/></td>
                        <td class="v-middle">
                            <a href="/workbenchadmin/vod?_id={$vv._id}&card_id={$v._id}" title="点击进入编辑" target="_blank">
                                {if $vv.extra.cover}
                                <img src="/uploads{$vv.extra.cover}" class="thumb-lg" border="0"/>
                                {else}
                                <i class="fa fa-film text-xxxl"></i>
                                {/if}
                            </a>
                        </td>
                        <td class="v-middle">{$vv.title}</td>
                        <td class="v-middle">{$vv.extra.duration} 秒</td>
                        <td class="v-middle">{$vv.filesize_format}</td>
                        <td class="v-middle">{$vv.ctime}</td>
                        <td class="v-middle">
                            <span class="btn-box">
                                <a href="/workbenchadmin/vod?_id={$vv._id}&card_id={$v._id}"
                                   class="btn btn-primary btn-xs edit-single" target="_blank">
                                <i class="fa fa-pencil"></i><span> 编辑</span>
                            </a>
                            <button type="button" class="btn btn-danger btn-xs delete-single" data-delete-type="video"
                                    data-duration="{$vv.extra.duration}">
                                <i class="fa fa-trash-o"></i><span> 删除</span>
                            </button>
                            </span>
                            <span class="btn-state" style="display: none"></span>
                        </td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
            </section>
        </section>

        <input type="hidden" name="card_id[]" value="{$v._id}"/>
        <input type="hidden" name="region_id_card[]" value="{$v.region_id}"/>
        <input type="hidden" name="attachments_img[]" value="{$v.attachments_img}"/>
        <input type="hidden" name="attachments_audio[]" value="{$v.attachments_audio}"/>
        <input type="hidden" name="attachments_video[]" value="{$v.attachments_video}"/>
        <input type="hidden" name="duration_audio[]" value="{$v.duration_audio}"/>
        <input type="hidden" name="duration_video[]" value="{$v.duration_video}"/>
    </section>
    {/foreach}
    {/if}

    <!--upload pop-->
    <div v-cloak id="upload_pop_wrap" class="upload-pop" v-if="uploadPopDisplay">
        <div id="upload_pop_header" class="upload-pop-header">
            <p>上传文件</p>
            <div class="pop-btn">
                <a href="javascript:void(0);" class="close-btn" @click="uploadPopHide">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-x">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </a>
            </div>
        </div>
        <div class="upload-tips" v-if="uploadTipsDisplay">
            <p class="tips-content" v-html="uploadTipsText"></p>
        </div>
        <div id="upload_view" class="upload-list" style="height: 430px">
            <!--<vuescroll :ops="scrollOps">-->
            <div class="upload-item" v-for="(item, index) in uploadList" :key="index" v-show="item.show">
                <div class="upload-item-box">
                    <div class="upload-f-name">
                        <div class="file-icon" :class="item.ext | suffixClass"></div>
                        <span v-html="item.name"></span>
                    </div>
                    <div class="upload-f-size" v-html="item.sizeFm"></div>
                    <div class="upload-f-progress" v-html="item.percent + '(' + item.speedFm + '/s)'"></div>
                    <div class="upload-f-status" :class="uploadStatusDisplay(item.state)"
                         v-html="uploadStatusTips(item.state)">
                    </div>
                    <div class="upload-f-operate">
                        <a href="javascript:;" @click="startSequenceTask(index)"
                           v-if="uploadOperateDisplay(item.state) === '已取消'" title="开始">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                <polyline points="17 8 12 3 7 8"></polyline>
                                <line x1="12" y1="3" x2="12" y2="15"></line>
                            </svg>
                        </a>
                        <a href="javascript:;" @click="cancel(index)" title="取消"
                           v-if="uploadOperateDisplay(item.state) === '等待上传' || uploadOperateDisplay(item.state) === '上传中'">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="15" y1="9" x2="9" y2="15"></line>
                                <line x1="9" y1="9" x2="15" y2="15"></line>
                            </svg>
                        </a>
                        <a href="javascript:;" @click="reUpload(index)" title="重传"
                           v-if="uploadOperateDisplay(item.state) === '已完成' || uploadOperateDisplay(item.state) === '已失败'">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round">
                                <polyline points="23 4 23 10 17 10"></polyline>
                                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="upload-progress-bar" :style="'width:' +  item.percent"></div>
            </div>
            <!--</vuescroll>-->
        </div>
    </div>
    <!--upload pop end-->
    <div v-cloak class="upload-pop-mask" v-if="uploadPopDisplay"></div>
</div>
